<div class="alain-default__content-title">
  <h1>
    工作台
    <small>Welcome !</small>
  </h1>
</div>
<div nz-row nzGutter="16">
  <div nz-col nzXs="24" nzSm="12" nzMd="6" class="mb-md point" (click)="goTo('/person/online')">
    <div nz-row nzType="flex" nzAlign="middle" class="bg-primary rounded-md">
      <div nz-col nzSpan="12" class="p-md text-white">
        <div class="h2 mt0">{{ this.onlinePersons.length }}</div>
        <p class="text-nowrap mb0">在线人数</p>
      </div>
    </div>
  </div>
  <div nz-col nzXs="24" nzSm="12" nzMd="6" class="mb-md point" (click)="goTo('/person/list')">
    <div nz-row nzType="flex" nzAlign="middle" class="bg-success rounded-md">
      <div nz-col nzSpan="12" class="p-md text-white">
        <div class="h2 mt0">{{ this.personNum }}</div>
        <p class="text-nowrap mb0">所有用户</p>
      </div>
    </div>
  </div>
  <div nz-col nzXs="24" nzSm="12" nzMd="6" class="mb-md point" (click)="goTo('/system/httplog/list')">
    <div nz-row nzType="flex" nzAlign="middle" class="bg-orange rounded-md">
      <div nz-col nzSpan="12" class="p-md text-white">
        <div class="h2 mt0">{{ this.httpLogNum }}</div>
        <p class="text-nowrap mb0">Http 请求数</p>
      </div>
    </div>
  </div>
  <div nz-col nzXs="24" nzSm="12" nzMd="6" class="mb-md point" (click)="goTo('/system/exceptio/list')">
    <div nz-row nzType="flex" nzAlign="middle" class="bg-magenta rounded-md">
      <div nz-col nzSpan="12" class="p-md text-white">
        <div class="h2 mt0">{{ this.exceptioNum }}</div>
        <p class="text-nowrap mb0">系统异常数</p>
      </div>
    </div>
  </div>
</div>
<div nz-row nzGutter="16">
  <div nz-col nzXs="24" nzMd="12">
    <nz-card [nzBordered]="false" [nzTitle]="salesTitle">
      <ng-template #salesTitle>
        用户登陆情况
        <small class="text-sm font-weight-normal"></small>
      </ng-template>
      <g2-bar *ngIf="salesData" height="275" [data]="salesData"></g2-bar>
    </nz-card>
  </div>
  <div nz-col nzXs="24" nzMd="12">
    <nz-card [nzTitle]="growthTitle" [nzBordered]="false">
      <ng-template #growthTitle>
        Http 请求情况
        <small class="text-sm font-weight-normal"></small>
      </ng-template>
      <g2-timeline
        *ngIf="offlineChartData"
        [data]="offlineChartData"
        [height]="255"
        [padding]="[0, 0, 0, 0]"
        [titleMap]="{ y1: 'Http 请求数量', y2: '-' }"
      ></g2-timeline>
    </nz-card>
  </div>
</div>
